<script setup lang="ts">
import { ref, watch } from "vue";
import { useColumns } from "./columns";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import Empty from "./empty.svg?component";
import AddFill from "@iconify-icons/ep/plus";
import Delete from "@iconify-icons/ep/delete";
import { message } from "@/utils/message";
import { clone, delObjectProperty } from "@pureadmin/utils";

interface tableItem {
  id?: string;
  data1?: string;
  data2?: string;
}

interface editTableInfo {
  dataList?: tableItem[];
  columnsName?: string[];
}

const props = withDefaults(defineProps<editTableInfo>(), {
  dataList: () => [
    {
      id: "1",
      data1: "Tom",
      data2: "2"
    },
    {
      id: "2",
      data1: "Jack",
      data2: "133"
    },
    {
      id: "3",
      data1: "Lily",
      data2: "1"
    },
    {
      id: "4",
      data1: "Mia",
      data2: "3"
    }
  ],
  columnsName: () => ["企业名称", "标识"]
});
const { editMap, columns } = useColumns();
const columnsConfig = ref(columns);
const isNew = ref(false);
const dataList = ref(clone(props.dataList, true));
let curRow = null,
  curIndex = -1;

const getCurRow = () => {
  return curRow;
};
const getCurIndex = () => {
  return curIndex;
};
columnsConfig.value[0].label = props.columnsName[0];
columnsConfig.value[1].label = props.columnsName[1];

const onAdd = () => {
  if (isNew.value) {
    console.log(isNew.value);
    message("请先保存新增数据");
    return;
  }
  isNew.value = true;
  const id = dataList.value.length + 1;
  let res = {
    id: id.toString(),
    data1: "",
    data2: ""
  };
  dataList.value.push(res);
  onEdit(res, id - 1);
};
const onDel = row => {
  const index = dataList.value.indexOf(row);
  if (index !== -1) dataList.value.splice(index, 1);
};
const onEdit = (row, index) => {
  editMap.value[index] = Object.assign({ ...row, editable: true });
  curIndex = index;
  curRow = row;
};
const onSave = (row, index) => {
  if (row.data1 == "" || row.data2 == "") {
    message("新增数据不允许为空");
    return;
  }
  if (isNew.value) {
    // console.log(row);
    isNew.value = false;
    // console.log(editMap.value[index]);
  }
  editMap.value[index] = Object.assign({ ...row });
  editMap.value[index].editable = false;
};
const onCancel = (row, index) => {
  // console.log("row", row);
  if (isNew.value) {
    onDel(row);
    isNew.value = false;
  } else {
    // console.log("cancel");
    // console.log(editMap.value[index]);
    // console.log(dataList);
    dataList.value[index] = delObjectProperty(editMap.value[index], "editable");
  }
  editMap.value[index].editable = false;
  curRow = null;
  curIndex = -1;
};
defineExpose({
  dataList,
  getCurRow,
  getCurIndex,
  onSave,
  onCancel
});
watch(
  () => [props.dataList, props.columnsName],
  (newVal, oldVal) => {
    columnsConfig.value[0].label = props.columnsName[0];
    columnsConfig.value[1].label = props.columnsName[1];
    dataList.value = clone(props.dataList, true);
  }
);
</script>

<template>
  <div class="flex">
    <pure-table
      row-key="id"
      align-whole="center"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      :data="dataList"
      :columns="columnsConfig"
    >
      <template #empty>
        <Empty fill="var(--el-svg-monochrome-grey)" class="m-auto" />
      </template>
      <template #append>
        <el-button
          plain
          class="w-full my-2"
          :icon="useRenderIcon(AddFill)"
          @click="onAdd"
        >
          添加一行数据
        </el-button>
      </template>
      <template #operation="{ row, index }">
        <div v-if="!editMap[index]?.editable">
          <el-button
            class="reset-margin"
            link
            type="primary"
            @click="onEdit(row, index)"
          >
            修改
          </el-button>
          <el-button
            class="reset-margin"
            link
            type="primary"
            :icon="useRenderIcon(Delete)"
            @click="onDel(row)"
            >删除</el-button
          >
        </div>
        <div v-else>
          <el-button
            class="reset-margin"
            link
            type="primary"
            @click="onSave(row, index)"
          >
            保存
          </el-button>
          <el-button class="reset-margin" link @click="onCancel(row, index)">
            取消
          </el-button>
        </div>
      </template>
    </pure-table>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-table__header th) {
  // background-color: #ebeef5; /* 设置表头背景颜色 */
  background-color: rgb(12, 120, 225) !important; /* 设置表头背景颜色 */
  color: aliceblue !important;
  font-weight: bold !important;
}
:deep(.el-table__inner-wrapper) {
  font-size: 14px;
  font-weight: 400;
}
</style>
